<template>
  <view class="nav pt-[30rpx] pb-[16rpx] bg-white" v-if="content.data.length && content.enabled">
    <view class="nav-item flex flex-wrap">
      <view v-for="(item, index) in content.data" :key="index" class="flex flex-col items-center w-1/5 mb-[30rpx]" @click="handleClick(item.link)">
        <u-image width="41px" height="41px" :src="getImageUrl(item.image)" alt="" />
        <view class="mt-[14rpx]">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { navigateTo } from '@/utils/util';

export default {
  props: {
    content: {
      type: Object,
      default() {
        return {};
      }
    },
    styles: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    ...mapState(['config'])
  },
  methods: {
    handleClick(link) {
      navigateTo(link);
    },
    getImageUrl(url) {
      return url ? this.config.domain + url : '';
    }
  }
};
</script>

<style></style>
